<!--
 - Author : chenyliu.
 - Date   : 2016/9/9.
 - File   : wh-brand.vue.
 -->

<template>
  <div class="switch" :class="{'active': status}" @click="changeStatus">
    <input type="hidden" value="2">
    <div class="switch-inner" v-if="status === 0">
      <span class="switch-center">未激活</span>
    </div>
    <div class="switch-inner" v-if="typeof status !== 'number'">
      <span class="switch-left">{{textOn}}</span>
      <span class="switch-center">&nbsp;</span>
      <span class="switch-right">{{textOff}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      status: {
        type: [Number, Boolean],
        default: false
      },
      textOn: {
        type: String,
        default: '启用中',
      },
      textOff: {
        type: String,
        default: '禁用中',
      },
      onChange: {
        type: Function,
        default: () => {}
      }
    },
    methods: {
      changeStatus() {
        this.status = !this.status
        this.onChange(this.status)
      }
    }
  }
</script>

<style lang="less">
  .transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -ms-transition: @transition;
    transition: @transition;
  }

  .switch {
    font-size: 12px;
    line-height: 14px;
    height: 20px;
    color: #fff;
    display: block;
    .switch-inner {
      display: inline-block;
      border: 1px solid #bbb;
      width: 80px;
      height: 100%;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      border-radius: 3px;
      background-color: #bbb;
      transition-delay: 0.5s;
      .transition(~"all 0.75s ease");
    }

    span {
      float: left;
      display: block;
      height: 100%;
      text-align: center;
      .transition(~"all 0.75s ease");
    }
    span.switch-left, span.switch-right {
      width: 68.75%;
      padding: 2px 0;
    }

    span.switch-center {
      padding: 2px 0;
      width: 31.25%;
      cursor: pointer;
      background-color: #fff;
      .transition(~"all 0.75s ease");

      &:active {
        background-color: darken(#fff, 7.5%);
      }
    }
    span.switch-left {
      margin-left: -100%;
    }
    span.switch-right {
      margin-right: 0;
    }

  }

  .switch.active {
    .switch-inner {
      border: 1px solid #5cf;
      background-color: #5cf;
    }
    .switch-center {
      background-color: #fff;
    }

    span.switch-right {
      margin-right: -100%;
    }

    span.switch-left {
      margin-left: 0;
    }
  }

  .switch.inactive {
    .switch-center {
      border-color: #bbb;
      background-color: #bbb;
      width: 100%;
    }
  }

</style>
